import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../../utils/screen_unit.dart';
import 'package:totaldemo/practice/seekbar2.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class FillQuestionairePage extends StatefulWidget {
  const FillQuestionairePage({Key key}) : super(key: key);

  @override
  _FillQuestionairePageState createState() => _FillQuestionairePageState();
}

class _FillQuestionairePageState extends State<FillQuestionairePage> {
  bool isButtonUse = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('问卷'),
      ),
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.only(top: 17.w),
            child: Row(
              // crossAxisAlignment: CrossAxisAlignment>??
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.all(
                    Radius.circular(8),
                  ),
                  child: Image.network(
                    'https://img0.baidu.com/it/u=1682050408,2246241836&fm=26&fmt=auto&gp=0.jpg',
                    width: 50.w,
                    height: 50.w,
                  ),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '老师名字',
                      style:
                          TextStyle(color: Color(0xff666666), fontSize: 15.w),
                    ),
                    SizedBox(
                      height: 6.w,
                    ),
                    Text(
                      '2020-2021 下学期',
                      style:
                          TextStyle(color: Color(0xff333333), fontSize: 15.w),
                    ),
                  ],
                ),
                Padding(
                  padding: EdgeInsets.only(bottom: 5.w),
                  child: Icon(
                    Icons.indeterminate_check_box,
                    size: 8.w,
                    color: Color(0xff7348DA),
                  ),
                ),
                Text(
                  '2021-06-12 16:42:00',
                  style: TextStyle(color: Color(0xff999999), fontSize: 15.w),
                ),
              ],
            ),
          ),
          Divider(),
          Expanded(
              child: ListView(
            children: [
              Padding(
                padding: EdgeInsets.only(top: 3.w, right: 125.w, left: 125.w),
                child: Text(
                  '教师满意度问卷调查',
                  style: TextStyle(
                      fontSize: 18.w,
                      color: Color(0xff7348DA),
                      fontWeight: FontWeight.bold),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 12.w, right: 17.w, left: 18.w),
                child: Text(
                  '　 你部《关于建立不动产登记工作部际联席会议制度有关问题的请示》（国土资发〔2014〕15号）收悉。现批复如下：　 你部《关于建立不动产登记工作部际联席会议制度有关问题的请示》（国土资发〔2014〕15号）收悉。现批复如下：　 你部《关于建立不动产登记工作部际联席会议制度有关问题的请示》（国土资发〔2014〕15号）收悉。现批复如下：　',
                  style: TextStyle(
                      fontSize: 13.w,
                      height: 2.w,
                      color: Color(0xff999999),
                      fontWeight: FontWeight.normal),
                ),
              ),
              Divider(
                indent: 18.w,
                endIndent: 18.w,
              ),
              questionTitle(
                  rank: '1', title: ',任课老师在教学中是否保持精神饱满，仪表端庄，声音洪亮（请您打分）'),
              sliderItem(context),
              questionTitle(
                  rank: '1', title: ',任课老师在教学中是否保持精神饱满，仪表端庄，声音洪亮（请您打分）'),
              Container(
                margin: EdgeInsets.only(top: 15.w),
                color: Colors.red,
                height: 30,
              ),
              questionTitle(rank: '2', title: '.你对任课老师有什么建设性的要求？请提出来你的宝贵意见。'),
              Container(
                width: 379.w,
                height: 121.w,
                decoration: BoxDecoration(
                    border: Border.all(width: 1, color: Color(0xff000000))),
                margin: EdgeInsets.all(18.w),
                child: Expanded(
                  child: TextField(
                    // minLines: 3,
                    minLines: 3,
                    maxLines: 5,

                    inputFormatters: <TextInputFormatter>[
                      // WhitelistingTextInputFormatter.digitsOnly, //只输入数字
                      LengthLimitingTextInputFormatter(500) //限制长度
                    ],
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.all(0),
                      border: InputBorder.none,
                      counterText: '(500字)',
                    ),
                  ),
                ),
              ),
              GestureDetector(
                onTap: isButtonUse
                    ? () {
                        print('我是真的');
                      }
                    : () {
                        print('我是假的');
                      },
                child: isButtonUse
                    ? Container(
                        // width: 379.w,
                        decoration: BoxDecoration(
                            color: Color(0xff5D3AB2),
                            borderRadius:
                                BorderRadius.all(Radius.circular(22.w))),
                        height: 40.w,
                        margin:
                            EdgeInsets.only(left: 18.w, right: 18.w, top: 20.w),
                        child: Center(
                          child: Text(
                            '提交1',
                            style: TextStyle(
                              color: Colors.white,
                            ),
                          ),
                        ))
                    : Container(
                        decoration: BoxDecoration(
                            color: Color(0xffDFDFDF),
                            borderRadius:
                                BorderRadius.all(Radius.circular(22.w))),
                        height: 40.w,
                        margin: EdgeInsets.only(
                            left: 18.w, right: 18.w, top: 20.w, bottom: 42.w),
                        child: Center(
                          child: Text(
                            '提2交',
                            style: TextStyle(
                              color: Colors.grey,
                            ),
                          ),
                        ),
                      ),
              ),
            ],
          )),
        ],
      ),
    );
  }

  Widget questionTitle({String rank, String title}) {
    return Padding(
      padding: EdgeInsets.only(top: 15.w, left: 18.w, right: 18.w),
      child: Row(
        children: [
          Text(
            '*',
            style: TextStyle(
              fontSize: 20.w,
              color: Colors.red,
            ),
          ),
          SizedBox(width: 11.w),
          Expanded(
            child: Text(
              rank + title,
              style: TextStyle(
                fontSize: 15.w,
                color: Color(0xff666666),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget sliderItem(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 18.w),
      child: Expanded(
        child: Row(
          // crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,

          children: [
            Text('很不满意'),
            Container(
              // width: 240,
              // height: 120,
              // margin: EdgeInsets.all(10),
              child: buildThem(context),
            ),
            Container(
                width: 40,
                padding: EdgeInsets.only(left: 12),
                margin: EdgeInsets.only(left: 0),
                decoration: BoxDecoration(
                  color: Color(0xffECECEC),
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
                child: Text(
                  '${_sliderValue.toStringAsFixed(0)}分',
                  style: TextStyle(fontSize: 11, color: Color(0xff7E52DF)),
                )),
            Text('很满意'),
          ],
        ),
      ),
    );
  }

  //Slider的值
  double _sliderValue = 1;
  Widget buildThem(BuildContext context) {
    return Theme(
      data: ThemeData(
        sliderTheme: SliderThemeData(
          trackHeight: 10,
          //滑块的颜色
          thumbColor: Colors.white,
          //滑块的大小
          thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10),

          //点击滑块边缘的颜色
          overlayColor: Colors.deepPurpleAccent.withOpacity(0.2),
          //点击滑块边缘的显示半径
          overlayShape: RoundSliderOverlayShape(overlayRadius: 20),
          //滑动左侧滚动条的颜色
          activeTrackColor: Color(0xff7546E6),
          //滚动条右侧的颜色
          inactiveTrackColor: Color(0xffEDE8FA),
          // //任何情况都显示气泡
          showValueIndicator: ShowValueIndicator.never,
          // //气泡的文字样式
          // valueIndicatorTextStyle: TextStyle(color: Colors.white),
          // //气泡的背景
          // valueIndicatorColor: Colors.redAccent,
        ),
      ),
      child: Container(
        color: Colors.red,
        width: 200.w,
        height: 9.w,
        child: MediaQuery.removePadding(
          context: context,
          removeLeft: true,
          removeRight: true,
          child: Slider(
            //Slider的当前的值  0.0 ~ 1.0
            value: _sliderValue,
            min: 0,
            max: 5,
            //平均分成的等分
            divisions: 5,
            //滚动时会回调
            onChanged: (double value) {
              _sliderValue = value;
              print("Value $_sliderValue");
              setState(() {});
            },
            onChangeStart: (double startValue) {
              print("开始滚动");
            },
            onChangeEnd: (double endValue) {
              print("停止 滚动");
            },
            //滑块以及滑动左侧的滚动条颜色
            // activeColor: Colors.redAccent,
            //滑块右侧的滚动条颜色
            // inactiveColor: Colors.blue,
            //气泡
            label: "${_sliderValue.toStringAsFixed(1)}",
          ),
        ),
      ),
    );
  }
}
